import { AccordionDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Accordion);

## Usage

Data used in Accordion examples:

```tsx
const groceries = [
  {
    emoji: "🍎",
    value: "Apples",
    description:
      "Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.",
  },
  {
    emoji: "🍌",
    value: "Bananas",
    description:
      "Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.",
  },
  {
    emoji: "🥦",
    value: "Broccoli",
    description:
      "Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.",
  },
];
```

<Demo data={AccordionDemos.configurator} />

## Custom control label

<Demo data={AccordionDemos.label} />

## Change chevron

<Demo data={AccordionDemos.chevron} />

## With icons

<Demo data={AccordionDemos.icons} />

## Change transition

To change transition duration, set `transitionDuration` prop:

<Demo data={AccordionDemos.customTransitions} />

To disable transitions, set `transitionDuration` to 0:

<Demo data={AccordionDemos.disableTransitions} />

## Default opened items

When `multiple={false}`, set `defaultValue` as string:

```tsx
import { Accordion } from "@mantine/core";

function Demo() {
  // Second item will be opened by default
  return (
    <Accordion defaultValue="item-2">
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}
```

When `multiple={true}`, set `defaultValue` as an array of strings:

```tsx
import { Accordion } from "@mantine/core";

function Demo() {
  // Both items will be opened by default
  return (
    <Accordion multiple defaultValue={["item-1", "item-2"]}>
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}
```

## Control state

When `multiple={false}`, set `value` as string:

```tsx
import { useState } from "react";
import { Accordion } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <Accordion value={value} onChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}
```

When `multiple={true}`, set `value` as an array of strings:

```tsx
import { useState } from "react";
import { Accordion } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <Accordion multiple value={value} onChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}
```

## Compose controls

You can add any additional elements that will be displayed next to `Accordion.Control`,
for example, you can add [ActionIcon](/core/action-icon/) or [Menu](/core/menu/):

<Demo data={AccordionDemos.sideControls} />

## Disabled items

Set `disabled` prop on `Accordion.Control` component to disable it.
Disabled items cannot be activated with mouse or keyboard, will be skipped when user navigates with arrow keys:

<Demo data={AccordionDemos.disabled} />

## Unstyled Accordion

Set `unstyled` prop on Accordion component to remove all non-essential library styles.
It can be used to style component with [Styles API](/styles/styles-api/) without overriding any styles.

<Demo data={AccordionDemos.unstyled} />

<StylesApiSelectors component="Accordion" />

Use [Styles API](/styles/styles-api/) to customize Accordion styles:

<Demo data={AccordionDemos.stylesApi} />

Use [Styles API](/styles/styles-api/) to customize Accordion styles:

<Demo data={AccordionDemos.customize} />

## TypeScript

`AccordionProps` type exported from `@mantine/core` is a generic, it accepts boolean type that
describes `multiple` state:

```tsx
import type { AccordionProps } from "@mantine/core";

type MultipleAccordionProps = AccordionProps<true>;
type DefaultAccordionProps = AccordionProps<false>;
```

## Accessibility

Accordion component follows [WAI-ARIA recommendations](https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html) on accessibility.

Set `order` on `Accordion` component to wrap accordion controls with h2-h6 heading.
The following example will wrap controls with h3 tag:

```tsx
import { Accordion } from "@mantine/core";

function Demo() {
  return <Accordion order={3}>{/* ...items */}</Accordion>;
}
```

Keyboard interactions:

<KeyboardEventsTable
  data={[
    { key: "ArrowDown", description: "Moves focus to next item" },
    { key: "ArrowUp", description: "Moves focus to previous item" },
    { key: "Home", description: "Moves focus to first item" },
    { key: "End", description: "Moves focus to last item" },
    {
      key: "Space/Enter",
      description: "Toggles focused item opened state",
    },
  ]}
/>
